<template>
    <div class="search-result">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <van-cell v-for="item in resultList" :key="item.id" :title="item.title" />
        </van-list>
    </div>
</template>
<script>
// 导入获取搜索结果的接口
 import { getSearchResult } from '@/api/search'

export default {
 name: 'SearchResult',
 data(){
     return {
        //查询结果
        resultList: [],
        loading: false,
        finished: false,
        page: 1,
        per_page: 15
     }
 },
 props: {
     searchtext: {
       type: String,
       required: true  
     }
 },
 methods: {
     async onLoad() {
      //请求数据
      const { data } = await getSearchResult({
          page: this.page,
          per_page: this.per_page,
          q: this.searchtext
      })
      console.log(data);
      //将数据放到  结果列表i李
      const results = data.data.results
      this.resultList.push(...results)
      //数据请求完完成将loading设为false
        this.loading = false;
      // 判断数据是否加载完成  加载完成finsh 设置为true
      if(results.length){
        this.page++ 
      }else{
         this.finished = true
      }
      //是否还有数据  有  page++ 没有finsh
    },
 }
}

</script>
<style lang="less" scoped>
.search-result{
    position: fixed;
    top: 54px;
    bottom: 0;
    overflow-y: auto;
    left: 0;
    right: 0;
}
</style>
